<template>
  <div id="app">
    <!-- 头部 topbar-->
    <Topbar :key="topchange"></Topbar>
    <!-- 头部导航部分  -->
    <Header></Header>
    <!-- 内容区域 -->
    <router-view @updatakey="updatakeyFn" />
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录组件 -->
    <Login v-show="isShowLoginModal"></Login>
    <!-- 提示框 -->
      <!-- 过渡组件 -->
    <transition name="slide">
      <Toast v-show="isShowToastModal"></Toast>
    </transition>
  </div>
</template>
<script>
import Topbar from '@/components/Topbar'
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Login from './components/login.vue'
import Toast from '@/components/Toast.vue'
import { JingpingApi,RemenApi } from './request/api'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      topchange:0
    }
  },
  components : {
    Topbar,
    Header,
    Footer,
    Login,
    Toast
  },
  methods:{
    updatakeyFn() {
      this.topchange++
    }
  },
  // 路由改变后，更新个人信息
  watch : {
    "$route.path" : {
      handler(newVal,oldVal) {
        if( newVal != oldVal ){
          // console.log("路由改变了");
          this.topchange++
        }
        // console.log(this.topchange);
      }
    }
  },
  computed: {
    ...mapState({
      isShowLoginModal: state => state.showModal.isShowLoginModal,
      isShowToastModal: state => state.showToast.isShowToastModal
    })
  },
  async created () {
    console.log('环境变量',process.env.VUE_APP_BASE_URL);
    console.log('环境变量',process.env.VUE_APP_TEST_NAME);
    // 1.域名不会经常改，但是其他页面要请求依然要再写一遍。
    //    如果接口域名或者端口或者接口地址发生变化了，那么每个组建中的请求都需要更改。
    //    request.js  解决baseURL 域名
    //    api.js      解决接口地址分散问题
    // 2.请求头问题，需要携带token的时候，每个相关组件请求都需要写。
    // 3.回调地狱（下一次请求再上一次请求完成之后执行）
    // axios.get('http://kumanxuan1.f3322.net:8881/cms/products/recommend')
    // .then(res => {
    //   console.log(res);
    // })
    // axios.get('/products/recommend')
    // .then(res => {
    //   console.log(res);
    // })
    // JingpingApi().then(res => {
    //   console.log(res);
    // })
    // RemenApi().then(res => {
    //   console.log(res);
    // })
    let res1 = await JingpingApi()
    // console.log("res1:" , res1);

    let res2 = await RemenApi()
    // console.log("res2:" , res2);
  }
}

</script>

<style lang="less">
/* 入场的起始状态 = 离场的结束状态 */
.slide-enter, .slide-leave-to{
  opacity: 0;
}

.slide-enter-active, .slide-leave-active{
  transition: opacity .3s linear;
}

.slide-enter-to, .slide-leave{
  opacity: 1;
}
</style>
